<template>
  <base-container>
    <el-card>
      <template #header>
        <div>el-tag 样式调试</div>
      </template>

      <!-- 大尺寸 -->
      <el-divider content-position="left">大尺寸 (size="large")</el-divider>
      <div class="tag-group">
        <p>样式 (effect="dark")</p>
        <el-space wrap>
          <el-tag size="large" type="primary" effect="dark" closable>Primary</el-tag>
          <el-tag size="large" type="success" effect="dark" closable>Success</el-tag>
          <el-tag size="large" type="info" effect="dark">Info</el-tag>
          <el-tag size="large" type="warning" effect="dark">Warning</el-tag>
          <el-tag size="large" type="danger" effect="dark">Danger</el-tag>
        </el-space>
      </div>
      <div class="tag-group">
        <p>样式 (effect="light")</p>
        <el-space wrap>
          <el-tag size="large" type="primary" effect="light" closable>Primary</el-tag>
          <el-tag size="large" type="success" effect="light" closable>Success</el-tag>
          <el-tag size="large" type="info" effect="light">Info</el-tag>
          <el-tag size="large" type="warning" effect="light">Warning</el-tag>
          <el-tag size="large" type="danger" effect="light">Danger</el-tag>
        </el-space>
      </div>
      <div class="tag-group">
        <p>样式 (effect="plain")</p>
        <el-space wrap>
          <el-tag size="large" type="primary" effect="plain" closable>Primary</el-tag>
          <el-tag size="large" type="success" effect="plain" closable>Success</el-tag>
          <el-tag size="large" type="info" effect="plain">Info</el-tag>
          <el-tag size="large" type="warning" effect="plain">Warning</el-tag>
          <el-tag size="large" type="danger" effect="plain">Danger</el-tag>
        </el-space>
      </div>

      <!-- 默认尺寸 -->
      <el-divider content-position="left">默认尺寸 (size="default")</el-divider>
      <div class="tag-group">
        <p>样式 (effect="dark")</p>
        <el-space wrap>
          <el-tag type="primary" effect="dark" closable>Primary</el-tag>
          <el-tag type="success" effect="dark" closable>Success</el-tag>
          <el-tag type="info" effect="dark">Info</el-tag>
          <el-tag type="warning" effect="dark">Warning</el-tag>
          <el-tag type="danger" effect="dark">Danger</el-tag>
        </el-space>
      </div>
      <div class="tag-group">
        <p>样式 (effect="light")</p>
        <el-space wrap>
          <el-tag type="primary" effect="light" closable>Primary</el-tag>
          <el-tag type="success" effect="light" closable>Success</el-tag>
          <el-tag type="info" effect="light">Info</el-tag>
          <el-tag type="warning" effect="light">Warning</el-tag>
          <el-tag type="danger" effect="light">Danger</el-tag>
        </el-space>
      </div>
      <div class="tag-group">
        <p>样式 (effect="plain")</p>
        <el-space wrap>
          <el-tag type="primary" effect="plain" closable>Primary</el-tag>
          <el-tag type="success" effect="plain" closable>Success</el-tag>
          <el-tag type="info" effect="plain">Info</el-tag>
          <el-tag type="warning" effect="plain">Warning</el-tag>
          <el-tag type="danger" effect="plain">Danger</el-tag>
        </el-space>
      </div>

      <!-- 小尺寸 -->
      <el-divider content-position="left">小尺寸 (size="small")</el-divider>
      <div class="tag-group">
        <p>样式 (effect="dark")</p>
        <el-space wrap>
          <el-tag size="small" type="primary" effect="dark" closable>Primary</el-tag>
          <el-tag size="small" type="success" effect="dark" closable>Success</el-tag>
          <el-tag size="small" type="info" effect="dark">Info</el-tag>
          <el-tag size="small" type="warning" effect="dark">Warning</el-tag>
          <el-tag size="small" type="danger" effect="dark">Danger</el-tag>
        </el-space>
      </div>
      <div class="tag-group">
        <p>样式 (effect="light")</p>
        <el-space wrap>
          <el-tag size="small" type="primary" effect="light" closable>Primary</el-tag>
          <el-tag size="small" type="success" effect="light" closable>Success</el-tag>
          <el-tag size="small" type="info" effect="light">Info</el-tag>
          <el-tag size="small" type="warning" effect="light">Warning</el-tag>
          <el-tag size="small" type="danger" effect="light">Danger</el-tag>
        </el-space>
      </div>
      <div class="tag-group">
        <p>样式 (effect="plain")</p>
        <el-space wrap>
          <el-tag size="small" type="primary" effect="plain" closable>Primary</el-tag>
          <el-tag size="small" type="success" effect="plain" closable>Success</el-tag>
          <el-tag size="small" type="info" effect="plain">Info</el-tag>
          <el-tag size="small" type="warning" effect="plain">Warning</el-tag>
          <el-tag size="small" type="danger" effect="plain">Danger</el-tag>
        </el-space>
      </div>
    </el-card>
  </base-container>
</template>

<script setup></script>

<style lang="scss" scoped>
  .tag-group {
    margin-bottom: 20px;
    p {
      margin-bottom: 10px;
      font-size: 14px;
      color: #606266;
    }
  }
  .el-divider {
    margin-top: 40px;
  }
</style>
